<template>
	<!-- 衍生品详情 -->
	<view class="" style="width: 100vw;height: 100vh">
		<!-- <view  style="min-height: 100vh">
			<image class="bg" src="/static/login/log_bg.png" mode="scaleToFill"></image> -->
		<view class="content" :style="{'background':kbackgroundColor}" style="min-height: 100vh">
			<!-- <image class="mart_bg" src="/static/detail/detail_bg.png" mode="scaleToFill"></image> -->
			<hx-navbar :title="info.name" :back="true" :fixed="false" :color="knavTitleColor" barPlaceholder="hidden"
				transparent="auto"></hx-navbar>
			<!-- <view v-if="ktheme == 'purple'" class="noticeTip" @click="toNotice()" :style="{border:borderSty}">相关公告</view> -->
			<view class="container">
				<view class="collect_img_box" :style="collectboxstyle">
					<view class="imgCont" v-if="ifshipin">
						<video @ended="videoend" :enable-progress-gesture="false" :controls="false" show-loading="false"
							:autoplay="true" class="collect_image" :src="videoSrc"></video>
					</view>
					<view v-if="ktheme != 'purple'" class="header-container">
						<view v-if="ifformat !='gif'" class="center-image">
							<image :src="info.image" mode="aspectFit">
						</view>
						<view v-if="ifformat =='gif'" class="cover-bg">
							<image :src="info.image" style="width:60%;" mode="aspectFit">
						</view>
						<image class="taizi-img" src="@/static/index/details/taizi.png"></image>
					</view>
					<view v-else style="z-index: -10;">
						<view class="animal-box" v-if="ifformat !='gif'">
							<view class="ani-list">
								<uni-view class="ani-info2 r1">
									<img class="an-image2" :src="info.image" alt="Your Image">
								</uni-view>
								<uni-view class="ani-info2 r1-bg"></uni-view>
								<uni-view class="ani-info r2"></uni-view>
								<uni-view class="ani-info2 r3-bg">
									<image class="an-image2" src="@/static/aipicture/zfsl_back.png" alt="Your Image">
								</uni-view>
								<uni-view class="ani-info r4"></uni-view>
								<uni-view class="ani-info r5"></uni-view>
								<uni-view class="ani-info r6"></uni-view>
							</view>
						</view>
						<view class="header-container" v-if="ifformat =='gif'">
							<view class="cover-bg">
								<image :src="info.image" style="width:60%;" mode="aspectFit">
							</view>
						</view>
					</view>
				</view>

				<view class="goods_name_box">
					<view :class="[ktheme != 'purple'?'price_boxblack':'price_box']">
						<view class="price">
							<view v-if="ifgstatus==='转售中'">
								<text class="priceStata"> 寄售价：</text><text
									style="font-size: 30rpx">￥</text>{{info.price|fp}}
							</view>
					 
							<view class="">
								<text class="priceStata"> 衍生价值：</text><text
									style="font-size: 30rpx">￥</text>{{info.price|fp}}
							</view>
						<text style="font-size:35rpx"> 衍生品价格￥</text><text style="font-size: 39rpx"></text>
							<view v-if="ktheme != 'purple'" class="price_right" @click="copyrightinterest()">
								<image src="/static/user//wenhao2.png" style="width: 27rpx;height: 27rpx;top: 5rpx;margin-right: 10rpx;"></image>
								<text style="font-size: 24rpx;">什么是版权权益?</text>
							</view>
						
						</view>
						<view class="goods_name">
							<view class="goods_name_info">
								<view class="cell-item-cb">
									<view class="goods_name_text">
										{{info.name}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="details_box">
				 
					<template>
						<view class="authorWrap">
							<view class="item" @click="arCollection()" :style="itembackground">
								<view v-if="ktheme != 'purple'" class="intro">
									<view :class="[ktheme != 'purple'?'user_black':'user']">
										<image class="avatar" style="margin-top: 0;" src="/static/login/logo.png" mode="scaleToFill"></image>
										<text :class="[ktheme != 'purple'?'size_item_black':'size_item']">AR藏馆</text>
									</view>
									<view :class="[ktheme != 'purple'?'user_black':'user']" :style="textstyle"
										style="margin-left: 10rpx;">
										<text>丝路遗珍·云·艺术馆</text>
									</view>
								</view>
								<view v-else class="intro">
									<text class="size_item">AR藏馆</text>
									<view class="user">
										<image class="avatar" style="margin-top: 0;" src="/static/login/logo.png" mode="scaleToFill"></image>
										<text>丝路遗珍·云·艺术馆</text>
									</view>
								</view>
								<image v-if="ktheme == 'purple'" class="icon" src="/static/detail/detail_icon.png"
									mode="scaleToFill"></image>
							</view>
							<view class="item" :style="itembackground" @click="copyrightIntroduce()">
								<view v-if="ktheme != 'purple'" class="intro">
									<view :class="[ktheme != 'purple'?'user_black':'user']">
										<image class="avatar" style="margin-top: 0;" :src="author.avatar" mode="aspectFill"></image>
										<text :class="[ktheme != 'purple'?'size_item_black':'size_item']">版权方</text>
									</view>
									<view :class="[ktheme != 'purple'?'user_black':'user']" :style="textstyle"
										style="margin-left: 10rpx;">
										<text>{{author.nickname}}</text>
									</view>
								</view>
								<view v-else class="intro">
									<text class="size_item">版权方</text>
									<view class="user">
										<image class="avatar" style="margin-top: 0;" :src="author.avatar" mode="aspectFill"></image>
										<text>{{author.nickname}}</text>
									</view>
								</view>
							</view>
						</view>
						<view class="block_info" :style="blockinfostyle">
							<view class="block_item" :style="blockitemstyle">
								<view class="block_label" :style="labelstyle">所属专辑</view>
								<image v-if="ktheme != 'purple'" src="/static/index/details/ripple2.png" style="width: 40%;height:50rpx;"></image>
								<view class="block_value" :style="valuestyle">{{info.category.name}}</view>
							</view>
						 
						</view>
					 
						<view v-if="ktheme != 'purple'" class="doubbox">
							<view class="certificate">
								<view class="" style="height: 150rpx;"></view>
								<view class="certificatetext">版权证书</view>
								<view class="certificateclick" @click="copyrightClick(1)">点击查看</view>
							</view>
							<view class="contract">
								<view class="" style="height: 150rpx;"></view>
								<view class="contracttext">版权合同</view>
								<view class="contractclick" @click="copyrightClick(2)">点击查看</view>
							</view>
						</view>
						<view v-else>
							<view class="copyright_image">
								<view class="copy_image">
									<image src="@/static/index/certificate.png" @click="copyrightClick(1)" mode=""
										style="width: 100%;height: 100%;"></image>
									<!-- <image :src="info.cert" @click="copyrightClick(1)" mode=""
										style="width: 100%;height: 100%;"></image> -->
								</view>
								<!-- 版权合同 -->
								<view class="copy_image">
									<image src="@/static/index/contract.png" @click="copyrightClick(2)"
										style="width: 100%;height: 100%;" mode=""></image>
								</view>
							</view>
						</view>					
					 

					</template>
				 
					<view v-if="info.content" :class="[ktheme != 'purple'?'cont-box_black':'cont-box']">
						<view class="cont_size" :style="{'color': (ktheme != 'purple' ? '#ECC58B':'#000')}">
							版权权益
						</view>
						<!-- <image class="article_tilte" src="/static/detail/title1.png" mode="widthFix"></image> -->
						<view class="content_box borradius">
							<jshopContent :content="info.content" v-if="info.content"></jshopContent>
						</view>
					</view>

					<view v-if="info.copyright" :class="[ktheme != 'purple'?'cont-box_black':'cont-box']">
						<view class="cont_size" :style="{'color': (ktheme != 'purple' ? '#ECC58B':'#000')}">
							版权展示
						</view>
						<jshopContent :content="info.copyright" v-if="info.copyright"></jshopContent>
					</view>
				</view>
			</view>


			<!-- v-if="ifSpId==='2EDC5641A20914ADA7D2DA'" -->
			<!-- <view class="shipingTip1" v-show="videoSrc!=='' && videoSrc!==null">
				<view class="shipingTip" v-if="!ifshipin" :style="{border:borderSty}" @click="toship(0)">播放视频</view>
				<view class="shipingTip" v-if="ifshipin" :style="{border:borderSty}" @click="toship(1)">显示照片</view>
			</view> -->
			<image v-if="ktheme == 'purple'" class="bot-img" style="margin-top: 20rpx;" src="/static/user/bot.png" mode="widthFix"></image>
			<image v-if="ktheme == 'black'" class="bot-img" style="margin-top: 20rpx;" src="/static/user/bot-black.png" mode="widthFix"></image>
			<view style="height: 120rpx;"></view>
		
		</view>
  
		<!-- 版权说明弹窗 -->
		<uni-popup ref="copyrightPopup" type="center" :maskBackgroundColor="'rgba(0,0,0,0.5)'">
			<view class="store-view" 
			:style="{'background':kbackgroundColor,color:knormalColor}"
			:class="[{'alert-border-black alert-border-shadow-black':ktheme =='black'},{'alert-border-purple':ktheme =='purple'}]">
				<text class="popup-title">版权权益</text>
				<text class="popup-subtitle">版权权益是指创作者对其创作的文学、艺术、音乐、戏剧、电影、电视、摄影等作品所享有的法律权利。这些权利包括了对作品的复制、发行、展览、表演、广播、改编、翻译等方面的控制和收益。
版权权益的目的是激励创作，促进文化和科技的发展，以及维护创作者的合法权益。在现代信息化和全球化的背景下，版权保护面临着许多挑战和威胁，如盗版、抄袭、侵权等行为。</text>
			</view>
		</uni-popup>
		
		<!-- 版权方弹窗 -->
		<uni-popup ref="copyrightIntrPopup" type="center" :maskBackgroundColor="'rgba(0,0,0,0.5)'">
			<view class="store-view" 
			:style="{'background':kbackgroundColor,color:knormalColor}"
			:class="[{'alert-border-black alert-border-shadow-black':ktheme =='black'},{'alert-border-purple':ktheme =='purple'}]">
				<text class="popup-title">版权方</text>
				<text class="popup-subtitle">金世界，作为中华优秀传统文化的传承者，致力于挖掘并融合中华文化精髓与现代艺术创造力。凭借前瞻视野和深厚底蕴，金世界成功实现200多件古代艺术品的数字化创作与交易，展现科技与文化的完美结合。未来，金世界计划建设多家艺术馆，并拥有丰富数字资产，推动文化产业创新发展。秉持“传承文化，创新未来”理念，交易所将持续弘扬中华文化，展现其世界魅力。</text>
			</view>
		</uni-popup>
		<!-- ar藏管弹窗 -->
		<uni-popup ref="arPopup" type="center" :maskBackgroundColor="'rgba(0,0,0,0.5)'">
			<view class="store-view" 
			:style="{'background':kbackgroundColor,color:knormalColor}"
			:class="[{'alert-border-black alert-border-shadow-black':ktheme =='black'},{'alert-border-purple':ktheme =='purple'}]">
				<text class="popup-title">AR藏馆</text>
				<text class="popup-subtitle">展望未来，金世界计划在全国建设5家丝路遗珍·云·艺术馆，馆藏古代艺术品将超过2000件，总价值预计达到约22亿元。同时，交易所将拥有数字资产约1500件，总价值更是高达约400亿元。这些举措将进一步推动中华优秀传统文化的传承与发展，为文化产业注入更多的活力和创新力。金世界将继续秉承“传承文化，创新未来”的理念，以科技为驱动，以文化为灵魂，不断推动文化产业的发展与创新，让中华优秀传统文化的魅力在世界范围内绽放光彩。</text>
			</view>
		</uni-popup>
	</view>
	</template>


<script>
	import {
		h5Url
	} from '@/config/config.js';
	import jshopContent from '@/components/jshop/jshop-content.vue' //视频和文本解析组件
	import paypass from '@/components/pay_pass/pay_pass.vue' //视频和文本解析组件
	import xwCountDown from '@/components/xw-CountDown'


	export default {
		components: {
			jshopContent,
			paypass,
			xwCountDown
		},
		data() {
			return {
				tiType: "",
				pdfSrc: "",
				msgType: "11",
				borderSty: this.$store.state.borderSty, //选中背景线颜色
				buttonBcak: this.$store.state.buttonBcak, //按钮颜色
				onlyBackgournd: this.$store.state.onlyBackgournd, //单个背景颜色
				selStyle: {
					'buttonBcak': this.$store.state.buttonBcak,
					'--pinkbackgroundLink': this.$store.state.pinkbackgroundLink,

				},
				ifSpId: "", //2EDC5641A20914ADA7D2DA 除了这个不显示视频播放
				ifshipin: false,
				id: 0,
				info: {
					lottery_list: {}
				},
				
				author: {},
				category: {},
				interval: false,
				second: 0,
				minute: 0,
				hour: 0,
				day: 0,
				share_img: '',
				isFirst: false,
				copyList: [{
					id: 1,
					periods: '1',
					date: '2023.10.15',
					earnings: '初始价*3%'
				}, {
					id: 2,
					periods: '2',
					date: '2023.11.12',
					earnings: '初始价*4%'
				}, {
					id: 3,
					periods: '3',
					date: '2023.12.16',
					earnings: '初始价*5%'
				}, {
					id: 4,
					periods: '4',
					date: '2023.10.16',
					earnings: '初始价*6%'
				}, {
					id: 5,
					periods: '5',
					date: '2023.10.16',
					earnings: '初始价*4%'
				}, {
					id: 6,
					periods: '6',
					date: '2023.10.16',
					earnings: '初始价*5%'
				}, {
					id: 7,
					periods: '7',
					date: '2023.10.16',
					earnings: '初始价*6%'
				}, {
					id: 8,
					periods: '8',
					date: '2023.10.16',
					earnings: '初始价*7%'
				}, {
					id: 9,
					periods: '9',
					date: '2023.10.16',
					earnings: '初始价*6%'
				}, {
					id: 10,
					periods: '10',
					date: '2023.10.16',
					earnings: '初始价*7%'
				}, {
					id: 11,
					periods: '11',
					date: '2023.10.16',
					earnings: '初始价*8%'
				}, {
					id: 12,
					periods: '12',
					date: '2023.10.16',
					earnings: '初始价*9%'
				}],
				visiblecopyList: [],
				openIf: false,
				ifformat: 'png',
				taiziImage: "", //底座
				videoSrc: '',
				certImage: "",
				vModelValue: 1, //购买数量
				maxnum: 0, //限购数量
				orderInfoMoney: "", //订单金额
				disabled: false,
				chaochuname: '',
				xiangou: 0,
				
				
				itembackground:'',
				textstyle:'',
				blockinfostyle:'',
				blockitemstyle:'',
				labelstyle:'',
				valuestyle:'',
				collectboxstyle:'',
			}
		},
		computed: {
			can_buy: function() {
				if (!this.info.lottery_info) return true;
				return this.info.win_status
			}
		},

		onLoad(options) {
			this.id = options.id;


			if (!this.id) {
				this.$common.errorToShow('商品失效')
				uni.navigateBack()
				return;
			}
			this.init()
			this.visiblecopyList = this.copyList.slice(0, 2)


			if(this.ktheme!= 'purple'){
				this.onlyBackgournd = '#000'
				this.itembackground = {
					'background-image': 'linear-gradient(to bottom, #393837 10%, #000000 50%)'
				}
				this.textstyle = {
					'text-decoration': 'underline'
				}
				this.blockinfostyle = {
					'border': '1rpx solid #fff',
					'border-radius': '20rpx'
				}
				this.blockitemstyle = {}
				this.labelstyle = {
					'color': '#DED9C8',
					'margin-left': '10rpx',
				}
				this.valuestyle = {
					'height': '50rpx',
					'color': '#DED9C8',
					'border-radius': '30rpx'
				}
				this.collectboxstyle = {'padding': '106rpx 0 0'}
			}else{
				this.itembackground = {'background': 'linear-gradient(45deg, #FFFFFF 0%, #FFE4E8 100%)','border': '1rpx solid #FFF0F2'}
				this.blockinfostyle = {'background':'#FDF7FB','border': '1rpx solid #FFF0F2'}
				this.blockitemstyle = {'padding': '20rpx 0'}
				this.valuestyle = {'border': '1px solid #ffc1c2','border-radius': '10rpx'}
				this.collectboxstyle = {'padding': '106rpx 0 0'}
			}
			
		},
		onShow() {
			if (this.isFirst) {
				this.init();
			}

		},

		onPullDownRefresh() {
			this.$api.getGoodsDetails({
				id: this.id
			}, res => {
				if (res.status) {
					this.info = res.data;
				}
			})
			setTimeout(function() {
				uni.stopPullDownRefresh()
			}, 2000)
		},

		methods: {
		 	// 版权方
		 	copyrightIntroduce(){
		 		this.$refs.copyrightIntrPopup.open()
		 	},
		 	// ar藏馆
		 	arCollection(){
		 		this.$refs.arPopup.open()
		 	},
			copyrightClick(val) {
				console.log("val000--", val)
				if (val === 1) {
					var _this = this
					//#ifdef H5
					// window.open( this.info.cert_link,'_blank' )
					// this.pdfSrc = encodeURIComponent(this.info.cert_link) 
					uni.navigateTo({
						url:`/pages/index/pdfview?url=${this.info
							.cert}&title=${this.info.name}`
						// url: '/pages/index/pdfview?url=' + this.info
						// 	.cert // encodeURIComponent(this.info.cert_link)
					})
					console.log("打印路径--", this.info.cert_link)
					// #endif
					//#ifdef APP-PLUS
					uni.downloadFile({
						url: _this.info.cert,
						success: function(res) {

							var filePath = res.tempFilePath;
							uni.openDocument({
								filePath: filePath,
								showMenu: true,
								success: function(res) {
									console.log('--打开文档成功');
								}
							});
						}
					});
					// #endif					

					console.log("打开文档--1", )
				} else if (val === 2) {
					uni.navigateTo({
						url: '/pages/index/contract'
					})
				} else {
					uni.showToast({
						title: '敬请期待...',
						icon: 'none'
					});

				}

			},
			qdai() {
				uni.showToast({
					title: '敬请期待...',
					icon: 'none'
				});
			},
			openMore(val) {
				if (val === 1) {
					this.visiblecopyList = this.copyList;
					this.openIf = true
				} else {
					this.visiblecopyList = this.copyList.slice(0, 2)
					this.openIf = false
				}


			},
			videoend() {

				this.ifshipin = false
			},
			getLotteryCode(lottery_id) {
				this.$api.getLotteryCode({
					lottery_id: lottery_id
				}, res => {
					if (res.status) {
						this.init()
					} else {
						this.$common.errorToShow(res.msg)
					}
				})
			},
			countDown(e, index) {
				this.init();
			},
			toship(val) {
				if (val === 0) {
					this.ifshipin = true
				} else {
					this.ifshipin = false
				}

			},
			init() {
				let userToken = this.$db.get("userToken");
				let data = {
					id: this.id
				}
				if (userToken) {
					data.token = userToken;
				}
				var _this = this
				this.$api.getGoodsDetails(this.id, res => {
					if (res.status) {
						this.info = res.data;
						this.author = this.info.author
						this.category = this.info.category
						console.log(this.info)
						// this.ifformat = res.data.image.substring(res.data.image.length - 3) //获取照片格式
						// this.isFirst = true;
						// this.ifSpId = res.data.id
						// this.taiziImage = res.data.dizuo_img
						// this.certImage = res.data.cert
						// this.videoSrc = res.data.video
						// this.orderInfoMoney = this.info.price

						uni.setNavigationBarTitle({
							title: res.data.name
						})

						// if (this.info.lottery_info) {
						// 	if (this.info.lottery_info.dur_time > 0) {
						// 		this.setIntervaler(this.info.lottery_info.dur_time)
						// 	}
						// }
					}
				})
			},

			setIntervaler: function(time) {
				if (this.interval) {
					clearInterval(this.interval);
				}
				this.set_time(time)
				let value = time;
				this.interval = setInterval(() => {
					if (value <= 0) {
						clearInterval(this.interval)
						this.init()
						return;
					}
					value--;
					this.set_time(value)

				}, 1000)


			},
			set_time: function(time) {
				let second = parseInt(time)
				//  分
				let minute = 0
				//  小时
				let hour = 0
				//  天
				let day = 0
				//  如果秒数大于60，将秒数转换成整数
				if (second > 60) {
					//  获取分钟，除以60取整数，得到整数分钟
					minute = parseInt(second / 60)
					//  获取秒数，秒数取佘，得到整数秒数
					second = parseInt(second % 60)
					//  如果分钟大于60，将分钟转换成小时
					if (minute > 60) {
						//  获取小时，获取分钟除以60，得到整数小时
						hour = parseInt(minute / 60)
						//  获取小时后取佘的分，获取分钟除以60取佘的分
						minute = parseInt(minute % 60)
						// 如果小时大于24， 将小时转换成天
						if (hour > 23) {
							//  获取天数，获取小时除以24，得到整天数
							day = parseInt(hour / 24)
							//  获取天数后取余的小时，获取小时除以24取余的小时
							hour = parseInt(hour % 24)
						}
					}
				}
				this.second = second
				this.minute = minute
				this.hour = hour
				this.day = day
			},



			home: function(status) {
				if (status == 0) {
					uni.switchTab({
						url: '/pages/index/index'
					})
				}
			},
			go_invite: function() {
				uni.navigateTo({
					url: '/pages/user/invite/gift'
				})
			},



			change_hanlder: function(e) {
				console.log(e)
				// #ifdef APP

				// #endif
			},
			// set_done: function(param) {
			// 	this.createOrder(param)
			// },
			// create_before: function() {

			// 	this.$api.issetPayPass({}, res => {
			// 		if (res.status) {
			// 			this.$refs.passbox.open();
			// 		} else {
			// 			this.$common.errorToShow(res.msg, () => {
			// 				if (res.data == 60019) {
			// 					uni.navigateTo({
			// 						url: '/pages/user/settings/pay_pass/pay_pass'
			// 					})
			// 				}
			// 			})
			// 		}
			// 	})
			// },
			show_img: function() {
				let img = ''
				img = this.info.image;
				// #ifdef APP
				if (this.type == 1) {
					return;
				}
				// #endif
				uni.previewImage({
					urls: [this.info.image],
				})
			},

			no_sale: function() {
				uni.navigateTo({
					url:`/pages/mart/item_list?id=${this.id}`
				})
			},
			no_sale2: function() {
				this.$common.errorToShow('未开售')
			},
			// 重复弹框关闭
			chaochuClose() {
				this.$refs.chaochu.open()
			},
			//重复弹框跳转
			chaochuConfirm(val) {
				this.vModelValue = val
				this.orderInfoMoney = parseFloat(this.info.price * this.vModelValue).toFixed(2)
			},
			// 重复弹框关闭
			repetitionClose() {

			},
			//重复弹框跳转
			repetitionConfirm() {
				uni.navigateTo({
					url: '/pages/user/order/order'
				})
			},
			blur(e) {

				console.log("e----11--", e)
				this.vModelValue = 1
			},
			changeValue(value) {
				console.log("cesa--------", value)
				if (value === 0) {
					this.vModelValue = 1

				} else {
					this.vModelValue = value

					if (this.vModelValue >= this.maxnum) {

						console.log("最大--", this.maxnum)
						uni.showToast({
							icon: 'none',
							title: '每人限购' + this.maxnum + '件版权'
						})
					}

					this.orderInfoMoney = parseFloat(this.info.price * value).toFixed(2)
				}
				// console.log("this.orderInfoMoney",this.orderInfoMoney)
				// console.log("this.orderInfoMoney",parseFloat(this.orderInfoMoney ).toFixed(2))
			},
			focus(e) {
				this.vModelValue = this.maxnum
				console.log('focus00000:', e);
			},
			//订单数量弹框
			orderFormClick() {
				this.$refs.orderForm.open()
				this.maxnum = this.info.xiangou_num
				this.orderInfoMoney = parseFloat(this.info.price * this.vModelValue).toFixed(2)
				if (this.info.xiangou_num === 1) {
					this.disabled = true
				}
			},
			//关闭订单弹框
			closeRorderClick() {
				this.$refs.orderForm.close()
			},
			createOrderNew() {
				let data = {
					iid:this.id
				}
				this.$api.createItemOrder(data, res1 => {
					console.log("res1.status--",res1)
					if (res1.status) {
						uni.navigateTo({
							url:'/pages/payment/index?order_id='+res1.data
						})
					} else {
						this.$api.userAccount({}, res => {
							if (res.status) {
								this.show_renzheng = res.data.isCertified;
								if (!this.show_renzheng) {
									setTimeout(() => {
										 
									}, 1000);
								}else{
									if(res.message){
										uni.showToast({
											icon: 'none',
											title: res.message
										})
									}
								}
							}
						})
						if (res1.code == 57004) {
							this.$refs.repetitionDialog.open()	
						}else if(res1.code == 52010){
							// 用户未上链
						} else if(res1.message){
							uni.showToast({
								icon: 'none',
								title: res1.message
							})
						}
					}
				})
			},
		 
			go_3d: function() {
				uni.navigateTo({
					url: '3dH5?src=' + this.info.url
				})
			},
			go_mart() {
				uni.switchTab({
					url: '/pages/mart/mart'
				})
			},

			toNotice() {
				console.log("公告--")
				//	uni.$emit('notice', 1);
				console.log("公告--")
				// this.$common.navigateTo('/pages/article/index?id=' + this.info.notice_id + '&id_type=2');
				uni.switchTab({
					url: '/pages/notice/notice'
				});
			},

			showShare() {
				let data = {
					page: 1,
					type: 3,
					client: 1,
					token: this.$db.get('userToken')
				}
				// 2023-8-22
				data.url = h5Url + '/#/pages/share/jump';
				this.$api.share(data, res => {
					if (res.status) {
						this.share_img = res.data.url;
						this.$refs.shareBox.open();
					}
				});
			},
			save: function() {
				// #ifdef H5
				this.downloadIamge(this.share_img, 'image');
				// #endif
				// #ifdef MP || MP-ALIPAY || APP-PLUS || APP-PLUS-NVUE
				this.downloadImageOfMp(this.share_img)
				// #endif
			},
			//下载图片地址和图片名
			downloadIamge(imgsrc, name) {
				var image = new Image();
				// 解决跨域 Canvas 污染问题
				image.setAttribute('crossorigin', 'anonymous');
				image.onload = () => {
					var canvas = document.createElement('canvas');
					canvas.width = image.width;
					canvas.height = image.height;
					var context = canvas.getContext('2d');
					context.drawImage(image, 0, 0, image.width, image.height);
					var url = canvas.toDataURL('image/png'); //得到图片的base64编码数据
					var a = document.createElement('a'); // 生成一个a元素
					var event = new MouseEvent('click'); // 创建一个单击事件
					a.download = name || 'photo'; // 设置图片名称
					a.href = url; // 将生成的URL设置为a.href属性
					a.dispatchEvent(event); // 触发a的单击事件
				};
				image.src = imgsrc;
				this.$refs.shareBox.close()
			},
			downloadImageOfMp(image) {
				let _this = this

				// 先下载到本地
				uni.downloadFile({
					url: image,
					success(res) {
						uni.saveImageToPhotosAlbum({
							filePath: image,
							success() {
								_this.$common.successToShow('保存成功')
								_this.$refs.shareBox.close()
							},
							fail() {
								_this.$common.errorToShow('图片保存失败')
							}
						});
					},
					fail() {
						_this.$common.errorToShow('下载失败')
					}
				})
			},
			copyrightinterest(){
				this.$refs.copyrightPopup.open()
			}
		}

	}
</script>

<style lang="scss" scoped>
	// html, body {
	//   -webkit-tap-highlight-color:rgba(0,0,0,0); 
	// }

	/deep/.uni-dialog-title-text {
		color: orange !important;
		font-size: 39rpx;
	}

	/deep/.uni-dialog-content-text {
		font-size: 35rpx;
	}

	/deep/.uni-popup {
		// position: fixed;
		/* #ifndef APP-NVUE */
		// z-index: 9998!important;
		/* #endif */
	}

	/deep/.maskClass {
		// z-index: 9999 !important;
	}

	/deep/.borradius .wxParse .img {
		border-radius: 30rpx !important;

	}

	.cont_size {
		color: #2a2a2a;
		font-size: 31rpx;
		font-weight: 600;
		margin-bottom: 10rpx;
	}

	.draw-lots {
		width: 100%;
		height: auto;
		background-color: rgba(255, 255, 255, .9);
		border-radius: 20rpx;
		border: 1rpx solid #FCC9CB;
		padding: 20rpx;

		.title {
			display: flex;
			align-items: center;
			padding-bottom: 20rpx;
			border-bottom: 1rpx solid #EBE9EA;

			.label {
				font-size: 28rpx;
				color: #000;
				font-weight: bold;
				margin-right: 13rpx;
			}

			.countdown {
				display: flex;
				align-items: center;
			}

			.text {
				font-size: 28rpx;
				color: #333;
				font-weight: 400;
			}
		}

		.my-text {
			padding: 20rpx 0 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.label {
				font-size: 28rpx;
				color: #141519;
				font-weight: 400;
			}

			.text {
				font-size: 24rpx;
				color: #9E9E9E;
				font-weight: 400;
			}
		}

		.lots-list {
			flex-wrap: wrap;

			.lots-item {
				position: relative;
				width: 305rpx;
				height: 81rpx;
				margin-top: 30rpx;

				.lots-code {
					width: 230rpx;
					text-align: center;
					line-height: 81rpx;
					font-size: 28rpx;
					color: #ABA9B4;
					font-weight: 400;
					position: relative;
					z-index: 4;
				}

				.checked {
					color: #fff;
				}

				.not {
					color: #863A3A;
				}

				.lots-item-type {
					width: 60rpx;
					height: 60rpx;
					position: absolute;
					top: 11rpx;
					right: 7rpx;
					z-index: 4;
				}

				.lots-item-label {
					width: 38rpx;
					height: 30rpx;
					position: absolute;
					top: 26rpx;
					right: 22rpx;
					z-index: 4;
				}

				.lots-item-bg {
					width: 305rpx;
					height: 81rpx;
					position: absolute;
					top: 0;
					left: 0;
					z-index: 3;
				}
			}

			&>view:nth-child(-n+2) {
				margin-top: 0;
			}
		}
	}

	.confirm {
		width: 524rpx;
		height: 84rpx;
		background: $btn-bg;
		border-radius: 100rpx;
		text-align: center;
		line-height: 84rpx;
		font-size: 32rpx;
		color: #fff;
		margin: 0 auto;
	}

	.share_img {
		width: 630rpx;
		height: 864rpx;
		border-radius: 20rpx;
		margin-bottom: 60rpx;
	}

	//视频播放去除拖拽等功能
	// /deep/.uni-video-bar-full{
	// 	display: none !important;
	// }
	// /deep/.uni-video-bar{
	// 	border:1px solid red !important；
	// }


	// 3d



	.3D {
		/* 让图片填充整个容器 */
		transform-style: preserve-3d;
		/* 保留3D效果 */
		transition: transform 20s;
		/* 设置旋转动画的时间 */
	}

	.image-container {
		perspective: 1000px;
		/* 这定义了观察者与z=0平面的距离，模拟3D效果 */
		width: 300px;
		border: 11px solid yellow;
		/* 定义图片的宽度 */
		height: 300px;
		/* 定义图片的高度 */
		margin: auto;
		/* 使图片在页面中居中 */

	}

	.rotate-image {
		width: 500rpx;
		/* 让图片填充整个容器 */
		height: 500rpx;

		margin: auto;
		text-align: center;
		// border:10rpx solid  #e2e2e2

	}

	.rotate-image:hover {
		transform: rotateY(360deg);
		/* 设置旋转角度 */
	}

	.rotate-image {
		/* ...其他样式... */
		animation: rotate 15s infinite linear;
		/* 设置一个无限循环的旋转动画 */
	}

	@keyframes rotate {
		from {
			transform: rotateY(0deg);
		}

		to {
			transform: rotateY(360deg);
		}
	}

	// 3D
	.animal-box {
		-webkit-perspective: 800;
		-webkit-transform-style: preserve-3d;
		perspective: 800;
		transform-style: preserve-3d;
		position: relative;
		width: 503rpx;
		height: 503rpx;
		margin: 13rpx auto;


	}

	.ani-list {
		position: absolute;
		left: 0rpx;
		top: 0rpx;
		-webkit-transform: rotateY(-50deg);
		-webkit-transform-style: preserve-3d;
		transform: rotateY(271deg); //rotateY(-50deg);
		transform-style: preserve-3d;
		-webkit-transform-origin: center;
		transform-origin: center;
		width: 500rpx;
		height: 500rpx;
		margin: 0 auto;
		animation: rotate 15s infinite linear;
		border-radius: 43rpx;

	}



	.animal-box .ani-list .r1,
	.animal-box .ani-list .r3 {
		width: 100%;
		height: 100%;
		margin: 0 auto;
		background-color: #dddedf;
		border: 5rpx solid #ff3936;
	}

	.animal-box .ani-list .r1-bg {
		top: 0px;
		width: 500rpx;
		height: 500rpx;
		-webkit-transform: translateZ(27rpx); //14px
		transform: translateZ(27rpx);
		background-color: #dddedf;
	}

	.animal-box .ani-list .r2 {
		top: 21rpx;
		// transform: rotateY(90deg) translateZ(248px) translateX(-13px); 
		//14px
		transform: rotateY(90deg) translateZ(492rpx) translateX(-26rpx); //-26rpx
		transform-origin: left;
		// transform: rotateY(90deg) translateZ(245px) translateX(0px);

		width: 50rpx;
		// height: 220px8
		height: 450rpx;

	}

	.animal-box .ani-list .r4 {
		// top: 20px;
		top: 20rpx;
		//28px
		-webkit-transform: rotateY(-90deg) translateZ(20rpx) translateX(0rpx);
		//10px
		transform: rotateY(-90deg) translateZ(20rpx) translateX(0rpx);
		width: 52rpx;

		// height: 230px;

		height: 450rpx;
	}

	.animal-box .ani-list .r1,
	.animal-box .ani-list .r3 {
		width: 100%;
		height: 100%;
		margin: 0 auto;
		background-color: #dddedf;
		// border: 5rpx solid #ff3936;
		border: 5rpx solid #673DE7;
	}

	.animal-box .ani-list .r3-bg {
		top: 0px;
		width: 500rpx;
		height: 500rpx;

		-webkit-transform: rotateY(180deg) translateZ(27rpx); //14px
		transform: rotateY(180deg) translateZ(27rpx);
		background-color: #dddedf;
		border: 5rpx solid #673DE7; //red
	}

	.ani-info2 {
		list-style-type: none;
		position: absolute;
		//top: 0px;
		left: 0px;
		right: 0px;
		bottom: 0px;
		text-align: center;
		// width: 249px;
		//height: 249px;
		// background: url('@/logo.png') no-repeat;
		// background-size: 100% 100%;
		background: #e8e8e8;
		-webkit-transition: -webkit-transform 2s, opacity 2s;
		-webkit-backface-visibility: visible;
		transition: opacity 2s, -webkit-transform 2s;
		transition: transform 2s, opacity 2s;
		transition: transform 2s, opacity 2s, -webkit-transform 2s;
		backface-visibility: visible;
		border-radius: 56rpx;
	}

	.animal-box .ani-list .ani-info {
		list-style-type: none;
		position: absolute;
		//top: 0px;
		left: 0px;
		right: 0px;
		bottom: 0px;
		text-align: center;
		// width: 249px;
		//height: 249px;
		// background: url('@/logo.png') no-repeat;
		// background-size: 100% 100%;
		background: #e8e8e8;
		-webkit-transition: -webkit-transform 2s, opacity 2s;
		-webkit-backface-visibility: visible;
		transition: opacity 2s, -webkit-transform 2s;
		transition: transform 2s, opacity 2s;
		transition: transform 2s, opacity 2s, -webkit-transform 2s;
		backface-visibility: visible;
		border-radius: 16rpx;
	}

	.animal-box .ani-list .r5 {
		left: 20rpx;
		top: 16rpx;

		-webkit-transform: rotateX(90deg) translateZ(22rpx); //11px
		transform: rotateX(90deg) translateZ(22rpx);
		// height: 26px;
		// width: 218px;
		height: 50rpx;

		width: 440rpx;
	}

	.animal-box .ani-list .r6 {
		left: 20rpx;
		top: -25rpx;
		//	-webkit-transform: rotateX(-90deg) translateZ(236px);
		transform: rotateX(-90deg) translateZ(472rpx);
		// height: 26px;
		// width: 218px;
		height: 50rpx;

		width: 440rpx;
	}

	// 	.animal-box .ani-list .r1 .an-image, .animal-box .ani-list .r3 
	.an-image {
		width: 100%;
		height: 100%;
		margin: 0rpx auto;
		background: #ffffff;
		padding: 30rpx;
		// border:5rpx solid red;
		box-sizing: border-box;
		border-radius: 52rpx;

		.image {

			border-radius: 50rpx;
		}
	}

	.an-image2 {
		width: 100%;
		height: 100%;
		margin: 0rpx auto;
		background: #ffffff;
		// border:5rpx solid red;
		box-sizing: border-box;
		border-radius: 52rpx;

		.image {}
	}

	.animal-box .ani-list .r1 {
		-webkit-transform: translateZ(30rpx); //15px
		transform: translateZ(30rpx);
	}

	.mess_datail {
		width: 276rpx;
		text-align: center;
		height: 32rpx;
		font-size: 22rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 32rpx;
		margin: 20rpx auto 31rpx;
		display: flex;
		justify-content: center;

		.image {
			width: 22rpx;
			height: 20rpx;
			border: 1px solid red;
		}
	}

	.copyright_image {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;

		.copy_image {
			width: 327rpx;
			height: 148rpx;
		}
	}
	
	.doubbox {
		width: 100%;
		// height: 600rpx;
		display: flex;
		justify-content: space-between;
	
		.certificate {
			width: 40%;
			height: 290rpx;
			margin-left: 50rpx;
			margin-top: 30rpx;
			background-image: url(/static/index/details/contract-bg.png);
			background-size: 100% 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
	
			.certificatetext {
				margin-top: -80rpx;
				font-size: 30rpx;
				color: #FFF3E1;
			}
	
			.certificateclick {
				margin-top: 40rpx;
				width: 160rpx;
				padding: 10rpx 0;
				text-align: center;
				border-radius: 26rpx;
				background-image: linear-gradient(135deg, #ECC58B 0%, #FFECC4 100%);
				color: #000;
				text-decoration: underline;
			}
	
		}
	
		.contract {
			width: 40%;
			height: 290rpx;
			margin-right: 50rpx;
			margin-top: 30rpx;
			background-image: url(/static/index/details/contract-bg.png);
			background-size: 100% 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
	
			.contracttext {
				margin-top: -80rpx;
				font-size: 30rpx;
				color: #FFF3E1;
			}
	
			.contractclick {
				margin-top: 40rpx;
				width: 160rpx;
				padding: 10rpx 0;
				text-align: center;
				border-radius: 26rpx;
				background-image: linear-gradient(135deg, #ECC58B 0%, #FFECC4 100%);
				color: #000;
				text-decoration: underline;
			}
		}
	}

	.block_copyright {
		width: 100%;
		height: auto;
		background: var(--pinkbackgroundLink); // rgba(255, 255, 255, .9);
		border-radius: 20rpx;
		border: 1rpx solid #FFF0F2;
		padding: 15rpx 20rpx;
		overflow: hidden;
		margin-bottom: 20rpx;

		.block_item {
			width: 100%;
			padding: 20rpx 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.block_label {
			font-weight: 500;
			color: #333333;
			font-size: 30rpx;
		}

		.block_value {
			width: 36rpx;
			height: 36rpx;
			background: #FBC9CA;
			border-radius: 30rpx;
			color: #fff;
			line-height: 36rpx;
			text-align: center;

			.icon {
				width: 100%;
				height: 100%;
			}
		}
	}

	.copyright {
		width: 674rpx;
		//height: 750rpx;
		background: linear-gradient(225deg, #FFF8F9 0%, #FFFFFF 100%);
		border-radius: 12rpx;
		border: 2rpx solid #FFFFFF;

	}

	.shouyi {
		width: 300rpx;
		height: 50rpx;
		font-size: 30rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 50rpx;
		padding: 15rpx 20rpx;
	}

	.table-wrapper {
		border: 2rpx solid #ffb3d7;
		margin: 25rpx auto;
		border-radius: 8px;
		width: 626rpx;
	}

	.table {
		// border: 1px solid #F5ACCE;
		// border: 1px solid #F5ACCE;
		border-collapse: collapse;
	}

	.row {
		display: flex;
		height: 100rpx;
	}

	.header {
		// 		width: 626rpx;
		border-radius: 12rpx 12rpx 0 0;
		line-height: 70rpx;
		font-weight: bold;
		line-height: 100rpx;
		background: linear-gradient(225deg, #EAB6FA 0%, #F9A7C4 100%);

	}

	.th {
		.cell {
			border: 1px solid #f5a6cb52;
		}
	}

	.tb {
		line-height: 100rpx;

		.cell {
			border: 1px solid #F5ACCE;
		}

	}

	.cell {
		flex: 1;
		// padding: 8px;
		text-align: center;
	}

	.mess_size {
		margin: 10rpx auto;
		width: 626rpx;
		height: 40rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 40rpx;
	}

	.open_mess {
		display: flex;
		margin: 20rpx auto;
		width: 627rpx;

		background: #ffcdcf70;
		border-radius: 26rpx;
		line-height: 50rpx;
		text-align: center;

		.text {
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #000000;
		}
	}

	.size_item {
		color: #000000;
		font-size: 31rpx;
		font-weight: 500;
	}
	.size_item_black {
		color: #fff;
		font-size: 40rpx;
		font-weight: 500;
		margin-top: -46rpx;
	}

	//订单数量弹框
	.order_info_item {
		width: 660rpx;
		margin: 5rpx auto;
		// padding: 10rpx 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 130rpx;
		font-size: 32rpx;
		color: #666;
		font-weight: 400;
		// margin-top: 10rpx;
	}
	.btntk {
		width: 590rpx;
		height: 80rpx;
		margin: 10rpx auto;
		border-radius: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		color: #fff;
		font-weight: 400;
	}
	/deep/.uni-numbox__minus {
		font-size: 35rpx !important;
	}

	/deep/.uni-numbox__value {
		font-size: 32rpx !important;
	}

	/deep/.uni-numbox__plus {
		font-size: 35rpx !important;
	}
	
	
	.alert-border-purple {
		box-shadow: 2rpx 2rpx 12rpx 4rpx #51515166 !important;
		box-shadow: inset 0rpx 0rpx 50rpx 0rpx rgba(254, 162, 221, 0.91) !important;
		background-color: #fff !important;
	}
	
	.alert-border-black {
		border: 6rpx solid transparent !important;
		background-clip: padding-box, border-box !important;
		background-origin: padding-box, border-box !important;
		background-image: linear-gradient(to bottom, #222, #222), linear-gradient(180deg, rgba(244, 249, 123, 1), rgba(84, 203, 122, 1)) !important;
	}
	.alert-border-shadow-black {
		box-shadow: inset 0rpx 0rpx 50rpx 0rpx rgba(88, 204, 123, 0.9) !important;
	}
	.store-view{
		display: flex;
		flex-direction: column;
		max-height: 1000rpx;
		margin: 0 40rpx;
		border-radius: 40rpx;
		width: 660rpx;
		.popup-title{
			width: 100%;
			margin-top: 40rpx;
			text-align: center;
		}
		.popup-subtitle{
			font-size: 28rpx;
			padding: 40rpx;
		}
	}
	
</style>
<style lang="scss">
	@import "@/pages/index/detail.scss";
</style>